import { User } from "@/api/interface/index";
import { checkUserExists, register } from "@/api/modules/user";
import { showMsg } from "@/utils/util";
import { ElForm, ElInput, ElMessageBox } from "element-plus";
import { PropType, defineComponent } from "vue";
import { showTips } from "../../../utils/util";
import "../index.scss";
import { usePhoneCode } from "./../../../hooks/getPhoneCode";
export default defineComponent({
	props: {
		detail: {
			type: Object as PropType<User.ReqUserRegister>,
			default() {
				return {};
			}
		}
	},
	emits: ["backLogin", "submit"],
	setup(props, { emit }) {
		type FormInstance = InstanceType<typeof ElForm>;
		type FormInputInstance = InstanceType<typeof ElInput>;
		const formRef = ref<FormInstance>();
		const codeInputEl = ref<FormInputInstance>();
		const checkUsername = async (rule: any, value: any, callback: any) => {
			if (!value) {
				return callback(new Error("请输入用户名"));
			}
			let res: any = await checkUserExists({ username: value });
			if (res.success) {
				callback(new Error("用户已经存在"));
			} else {
				callback();
			}
		};
		const formRules = reactive({
			mobile: [
				{ required: true, message: "请输入手机号", trigger: "change" },
				{ validator: checkUsername, trigger: "blur" }
			],
			code: [{ required: true, message: "请输入手机验证", trigger: "change" }],
			company: [{ required: true, message: "请输入公司名称", trigger: "change" }],
			username: [{ validator: checkUsername, trigger: "blur" }]
		});
		let { getCode, codeStatus } = usePhoneCode(props.detail);

		const geePhoneCode = () => {
			getCode();
			codeInputEl.value?.focus();
		};

		const submit = () => {
			formRef.value?.validate(async valid => {
				if (!valid) {
					return;
				}
				if (!props.detail.username) {
					props.detail.username = props.detail.mobile;
				}
				let res: any = await checkUserExists({ username: props.detail.mobile });
				if (res.success) {
					showMsg("用户已经存在", false);
					return;
				}
				res = await checkUserExists({ username: props.detail.username });
				if (res.success) {
					showMsg("用户已经存在", false);
					return;
				}
				console.log(res);

				let isDefaultPassword = !props.detail.password;
				if (isDefaultPassword) {
					props.detail.password = "123456";
				}
				let { code, message } = await register(props.detail);
				let ok = showTips(code, "用户注册", message);

				if (ok) {
					if (isDefaultPassword) {
						ElMessageBox.confirm(
							`注册成功，您的默认密码是【<span style="color: red;font-size: 15px;font-weight: bold;">${props.detail.password}</span>】`,
							"消息提示",
							{
								buttonSize: "large",
								confirmButtonText: "立即登录",
								showCancelButton: false,
								dangerouslyUseHTMLString: true,
								type: "info",
								draggable: true
							}
						).then(() => {
							emit("submit");
						});
					} else {
						emit("submit");
					}
				}
			});
		};
		const gotoLogin = () => {
			emit("backLogin");
		};
		return () => {
			return (
				<div class="register-page flex">
					<div class="bg"></div>
					<div class="form">
						<div class="reg-title">
							<span class="text">用户注册</span>
							<el-form ref={formRef} rules={formRules} model={props.detail} label-position="top" size="large">
								<el-form-item label="手机号" prop="mobile">
									<el-input
										v-model={props.detail.mobile}
										placeholder="(+86)请输入手机号码"
										onInput={() => {
											props.detail.username = props.detail.mobile;
										}}
									>
										{{
											prefix: () => {
												return <span class="iconfont iconbx-mobile-alt" />;
											}
										}}
									</el-input>
								</el-form-item>
								<el-form-item label="验证码" prop="code">
									<el-input ref={codeInputEl} v-model={props.detail.code} placeholder="请输入注册验证码">
										{{
											prefix: () => {
												return <span class="iconfont iconbx-barcode" />;
											},
											append: () => {
												return (
													<el-button type="info" loading={codeStatus.countDown > 0} onClick={() => geePhoneCode()}>
														{codeStatus.countDown > 0 ? (
															<span class="text-black">
																<span class="text-red-600">{codeStatus.countDown}</span>秒后重试
															</span>
														) : (
															<span>获取验证码</span>
														)}
													</el-button>
												);
											}
										}}
									</el-input>
								</el-form-item>
								<el-form-item label="登录账号" prop="username">
									<el-input v-model={props.detail.username} placeholder="请输入登录账号">
										{{
											prefix: () => {
												return <span class="iconfont iconbx-user" />;
											}
										}}
									</el-input>
								</el-form-item>
								<el-form-item label="登录密码" prop="password">
									<el-input
										v-model={props.detail.password}
										placeholder="请输入登录密码"
										type="password"
										autocomplete="new-password"
										show-password
									>
										{{
											prefix: () => {
												return <span class="iconfont iconbx-lock" />;
											}
										}}
									</el-input>
								</el-form-item>
								<el-form-item label="公司名称" prop="company">
									<el-input v-model={props.detail.company} placeholder="请输入公司信息">
										{{
											prefix: () => {
												return <span class="iconfont iconbx-building-house" />;
											}
										}}
									</el-input>
								</el-form-item>
							</el-form>
							<div class="footer">
								<el-button type="primary" size="large" class="submit" onClick={() => submit()}>
									立即注册
								</el-button>
								<div class="back-login">
									已经账号，
									<el-link type="primary" onClick={() => gotoLogin()}>
										返回登录
									</el-link>
								</div>
							</div>
						</div>
					</div>
				</div>
			);
		};
	}
});
